<template>
	<view>
		<u-navbar title="" :background="background" back-icon-color="#FFFFFF" :border-bottom="false">

			<view class="slot-wrap flex flex-jc-fe">
				<view @click="showIcon">
					<i-icon icon="iconfenxiang" size="44rpx" color="#FFFFFF"></i-icon>
				</view>
			
			</view>

			
		</u-navbar>
		
    <page-loading :show="list">
		<!-- 背景 -->
		<view class="bg">
			<image src="https://files.yzsheng.com/client/index/welfareDetails/tuoyuan.png"></image>
		</view>
		
		<!-- 头部banner -->
		<view class="header">
			<view class="title" v-if="list.package_Title!=='终身省心暖保包'">车主必备神卡</view>
			<view class="title" v-else>老司机挚爱神卡</view>
			<view class="title2">相因相因巨相因，百亿补贴买买买</view>
		</view>

		<view class="banner">

			<image :src="list.pic_URL" mode="aspectFill"></image>
			<!-- <view class="flex flex-ai-fe" style="height: 100%;margin: 0rpx 40rpx;padding-bottom: 10rpx;">
				<view style="color: #333333;font-size: 40rpx;font-weight: bold;margin-right: 10rpx;">￥{{list.discount_Price}}</view>
				<view style="text-decoration: line-through;color: #999999;">￥{{list.normal_Price}}</view>
			</view> -->
		</view>
		<view class="flex flex-ai-c flex-jc-c title-line">
			<image src="https://files.yzsheng.com/client/index/carMaintenance/xian.png"></image>
			<view class="card-title">{{list.package_Title}}</view>
			<image src="https://files.yzsheng.com/client/index/carMaintenance/xian2.png"></image>
		</view>

		<!-- 卡片内容 -->
		<view class="bg-card">
			<view style="width: 689rpx;height: 150rpx;" class="img-head"><image src="https://files.yzsheng.com/client/index/carMaintenance/WelfarePurchase.png" style="width: 100%;height: 100%;"></image></view>
			<!-- <scroll-view scroll-y style="height: 65%;width: 100%;"> -->
			<view style="box-shadow: 0px 6rpx 18rpx 0rpx rgba(215, 215, 215, 0.6);width: 650rpx;margin: 0 auto;">
				<view style="margin: 0 24rpx;">
				
					<!-- list列表 -->
					<!-- <view class="list-title">保养包</view> -->
					<view v-for="(item1,index2) in list.buyDiscountsDetailsGroup" :key='index2' style="border-bottom: 2rpx solid #EEEEEE;">
						<view style="font-size: 26rpx;font-weight: bold;margin: 30rpx 0;">{{item1.group_Name}}</view>
						<view class="flex flex-jc-sb list" v-for="(item,index) in item1.buyDiscountsDetailsList" :key='item.id'>
							<view class="bg-card-img">
								<image :src="item.pic_URL" style="width: 140rpx;height: 140rpx;border-radius: 10rpx;" v-if="Number(item.coupon_Goods_Rule_Type_Id) === 1 || Number(item.coupon_Goods_Rule_Type_Id) === 4"></image>
								<view v-else style="color: #999999;margin-top: 25rpx;font-size: 26rpx;" class="flex flex-dir-c">服务工时费</view>
							</view>
							<view style="width: 73%;" class="flex flex-dir-c flex-jc-c">
								<view class="words">{{item.goods_Name}}</view>
								<view class="tag">
									<!-- <text class="tag-1">全合成</text>
									<text class="tag-2">5W-40</text> -->
								</view>
								<view class="flex flex-jc-sb" style="margin-top: 10rpx;">
									<view class="price">
										￥<text style="font-size: 32rpx;" v-if="item.coupon_type===51451&&item.discount_Price!==0">
											{{item.discount_Price}}/次
											<text style="font-size: 20rpx;color: #999999;text-decoration: line-through;margin-left: 10rpx;">
												￥{{item.normal_Price}}
											</text>
											
										</text>
										<text style="font-size: 32rpx;" v-else>
										{{item.normal_Price}}
										</text>
									</view>
									<view class="number" v-if="item.coupon_type===51451&&item.discount_Price!==0">x365</view>
									<view v-else>×{{item.total_Num || '终身'}}</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				
				<view>
					<!-- <u-line color="#E0E0E0" border-style="dashed" :hair-line="false"></u-line> -->
				
					<view style="padding:30rpx 24rpx 30rpx 24rpx" class="footer-list">
						<view class="flex flex-jc-sb">
							<view>原价</view>
							<view>￥{{list.normal_Price || '无法估算'}}</view>
						</view>
						<view class="flex flex-jc-sb">
							<view>优惠</view>
							<view>￥{{price(list.normal_Price,list.discount_Price)<0?'无法估算':price(list.normal_Price,list.discount_Price)}}</view>
						</view>
						<view class="flex flex-jc-sb">
							<view>总价</view>
							<view style="color: #FF6F6A;">
								<text style="font-size: 20rpx;">￥</text>
								<text style="font-size: 32rpx;font-weight: bold;">{{list.discount_Price}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<view>
					<u-line color="#E0E0E0" border-style="dashed" :hair-line="false"></u-line>
				
					<view class="flex flex-ai-c" style="padding:30rpx 24rpx 30rpx 24rpx">
						<view @click="radioGroupChange">
							<!-- 勾选 -->
							<i-icon v-if="values" icon="iconiconfontxuanzhong" type="single" size="36rpx" color="#FBBC00"></i-icon>
							<!-- 未选择 -->
							<view v-else style="width: 36rpx;height: 36rpx;border-radius: 50%;border: 2rpx solid #BFBFBF;"></view>
						</view>
				
						<view class="link" style="font-size: 22rpx;color: #666666;margin-left: 10rpx;">点击“去支付”按钮并购买养车礼包时，即代表您已阅读、理解并接受
							<text @click="confirm(list.user_Agreement)" style="color: #FBB000;border-bottom: 2rpx solid #FBB000;">
								电子会员养车礼包说明及规定。
							</text>
							 
						</view>
					</view>
				</view>
			</view>
				
				
			<!-- </scroll-view> -->

		</view>
		<view style="height: 200rpx;"></view>
		<!-- 去支付 -->
		<view style="position: fixed;bottom: 0rpx;width: 100%;">
			<view class="footer">
				<view class="footer-btn flex flex-jc-c">
					<view class="footer-btn-left flex flex-jc-sa flex-ai-c">
						<view style="text-align: center;">
							<view><text style="color: #FFFFFF;">￥</text>{{list.discount_Price}}</view>
							<view style="color: #999999;font-size: 22rpx;text-decoration: line-through;">原价：{{list.normal_Price}}</view>
						</view>
						
						<view>
							<!-- <view class="flex flex-ai-c">
								<view><text>限时：</text>
									<u-count-down :timestamp="timestamp" bg-color="#3D3D3D" color="#FFF" separator-color="#FFF"></u-count-down>
								</view>
								<view></view>
							</view> -->
							<view><text>限量：</text>{{list.sale_Num}}<text>/{{list.total_Num}}</text></view>
						</view>
					</view>
					<view class="footer-btn-right" @click="goPay(list.id)">去支付</view>
				</view>
			</view>
		</view>
    </page-loading>
		
		<!-- <u-modal v-model="isShow" :mask-close-able="true" :show-title="false" :show-confirm-button="false">
			<view style="width: 497rpx;margin: 0 auto;line-height: 50rpx;">
				<view style="width: 355rpx;font-size: 36rpx;text-align: center;margin: 0 auto;font-weight: bold;padding: 53rpx 0;">电子养车礼包说明手册及用户协议</view>
				<view>
					<view style="font-size: 26rpx;">
						<rich-text :nodes="list.user_Agreement"></rich-text>
					</view>
				</view>
				<view class="btn">
					<view>确定</view>
				</view>
			</view>

		</u-modal> -->
		<share v-model='popupShow' @change='goPartner'></share>
	</view>
</template>

<script src='./WelfarePurchase.js'></script>

<style lang="scss">
	@import './WelfarePurchase.scss';
</style>
